<template>
  <transition enter-active-class="animated bounceInRight" @leave="handleLeave">
    <template v-if="type=='notice'">
      <div class="ifast-notice-content" >
        <div class="notice-left"></div>
        <div class="notice-right">
          
          <div class="ifast-notice-title">
            <div v-html="title"></div>
            <Icon class="float-right" :type="closeIcon" @click="iconClick"></Icon>
          </div>
          <div class="ifast-notice-body">
            <div v-html="content"></div>
            <div class="">

            </div>
          </div>
        </div>
      </div>
    </template>
  </transition>
</template>

<script>
let prefixCls='ifast'

import Icon from '../icon/icon'
export default {
  name: 'Notice',
  components:{Icon},
  props:{
    name:{
      type:String
    },
    type:{
      type:String
    },
    title:{
      type:String
    },
    content:{
      type:String
    },
    colseFalg:{
      type:Boolean,
      default:false,
    },
    closeIcon:{
      type:String,
      default:'ion-ios-close'
    },
    onClose:{
      type:Function,
      default:()=>{}
    }
  },
  computed:{
    notifcationContent(){
      return[
        `${prefixCls}-notifcation-content`,
      ]
    }
  },
  data () {
    return {
    }
  },
  mounted(){
    
  },
  methods: {
    iconClick(){
      this.$parent.colse(this.name);
      this.onClose();
    },
    handleLeave (el) {
      el.style.height = 0;
      el.style.paddingTop = 0;
      el.style.paddingBottom = 0;
    }
  }
}
</script>